<template>
  <teleport to="body">
    <div v-if="visible" class="modal">
      <div class="modal-content">
        <span class="close" @click="close">&times;</span>
        <h2>申请下架</h2>
        <p>{{ message }}</p>
        <div class="footer">
          <a-button
            style="
              margin-right: 16px;
              background-color: rgba(76, 200, 126, 1);
              border-radius: 2px 2px 2px 2px;
            "
            type="primary"
            @click="handleOk"
            >确定</a-button
          >
          <a-button
            style="margin-left: 8px; border-radius: 2px 2px 2px 2px"
            @click="close"
            >取消</a-button
          >
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
// import { ref } from "vue";

// Props
const props = defineProps({// eslint-disable-line no-unused-vars

  visible: Boolean,
  message: String,
});
// Emits
const emit = defineEmits(["update:visible"]);
// Methods
const close = () => {
  emit("update:visible", false);
};
const handleOk = () => {
  emit("update:visible", false);
};
</script>

<style scoped>
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
